<!--
 * @Description:
 * @Date: 2021-06-24 21:06:06
 * @LastEditTime: 2021-08-17 10:33:31
-->
<template>
  <div class="app-container">
    <div class="filter-container mb10">
      <el-input v-model="queryParam.name" placeholder="任务名称" clearable class="filter-item form-search-input" />
      <el-select v-model="queryParam.group" clearable placeholder="请选择分组" class="filter-item" style="margin-right: 5px">
        <el-option value="1" label="默认" />
        <el-option value="2" label="系统" />
      </el-select>
      <el-select v-model="queryParam.status" clearable placeholder="请选择执行状态" class="filter-item" style="margin-right: 5px">
        <el-option value="1" label="启用" />
        <el-option value="2" label="失败" />
      </el-select>
      <el-date-picker v-model="queryParam.start_at" class="filter-item" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" style="margin-right: 5px" placeholder="选择开始时间" />
      <el-date-picker v-model="queryParam.end_at" type="datetime" class="filter-item" value-format="yyyy-MM-dd HH:mm:ss" style="margin-right: 5px" placeholder="选择结束时间" />
      <el-button class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button class="filter-item search" icon="el-icon-back" @click="$router.go(-1)">
        返回
      </el-button>
    </div>
    <div v-loading="loading">
      <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column label="编号" prop="id" width="80" />
        <el-table-column label="名称" prop="name" />
        <el-table-column prop="group" label="分组">
          <template slot-scope="cron">
            {{ cron.row.group === 1 ? '默认' : '系统' }}
          </template>
        </el-table-column>
        <el-table-column prop="task" label="调用目标类" />
        <el-table-column prop="used_time" label="耗时">
          <template slot-scope="cron">
            {{ cron.row.used_time + '秒' }}
          </template>
        </el-table-column>
        <el-table-column prop="error_message" label="错误日志" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="cron">
            <el-tag v-if="cron.row.status === 1" class="el-icon-check" effect="dark" type="success"> 成功</el-tag>
            <el-tag v-else type="danger" class="el-icon-close" effect="dark">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" />
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10,50,100,200,500]" :page-size="queryParam.limit" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-------- 回到顶部 ------------>
    <el-backtop :visibility-height="100">
      <i class="el-icon-caret-top" />
    </el-backtop>
  </div>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'

export default {
  name: 'SystemCrontabLog',
  mixins: [formOperate],
  data() {
    return {
      // 用户搜索
      queryParam: {
        crontab_id: '',
        name: '',
        group: '',
        status: '',
        start_at: '',
        end_at: ''
      },
      date: '',
      url: 'monitor/crontab/log/list'
    }
  },
  created() {
    if (this.$route.params.crontab_id !== undefined) {
      this.queryParam.crontab_id = this.$route.params.crontab_id
    }
  },
  methods: {
    disOrEnableCron(cron) {
      this.$http.put(this.url + '/' + cron.id).then(response => {
        this.$message.success(response.message)
      })
    },
    selectDate(value) {
      alert(value)
    }
  }
}
</script>
